import React from 'react';
import { Routes, Route, Navigate } from 'react-router-dom';
import { useRouteStore } from '~/stores/route.store';
import { generateRoutesFromMenus } from '~/utils/route.utils';

/**
 * 动态路由组件
 * 根据用户菜单权限动态生成路由
 */
const DynamicRoutes: React.FC = () => {
  const menus = useRouteStore((state) => state.menus);
  
  // 从菜单生成路由配置
  const routes = React.useMemo(() => {
    return generateRoutesFromMenus(menus);
  }, [menus]);

  return (
    <Routes>
      {routes.map((route) => (
        <Route
          key={route.path}
          path={route.path}
          element={route.element}
        />
      ))}
      {/* 默认重定向到首页 */}
      <Route path="*" element={<Navigate to="/" replace />} />
    </Routes>
  );
};

export default DynamicRoutes;

